﻿<!DOCTYPE html>
<html>
<head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <style type="text/css">
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%;}
        /* CARD */
        .card {
            display: flex;
            flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex-direction: column;
            width: 18rem;
            min-width: 0;
            position: fixed;
            bottom: 1.8rem;
            right: 1rem;
            padding: 0.5rem 0.5rem 0.5rem 1rem;
            background-color: #fff;
            background-clip: border-box;
            border-width: 0;
            border-radius: 1rem;
            font-size: 12px;
            font-family: Arial;
            word-wrap: break-word;
            color: #0288d1;
            display: block;
            opacity: 0.9;
            z-index:9999;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <div class="card">
        <span id="map-zoom">11</span> :
        <span id="map-center">121.498586,31.239637</span>
    </div>
</body>
</html>
<script>
    var map = L.map('map').setView([39.915, 116.404], 12);
    var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 22,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,  Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);

    // 禁止鼠标右键，显示当前坐标和放缩级别
    map.on("contextmenu", function (evt) {})
    map.on("move", function (evt) { showMapInfo();})
    map.on("zoomend", function (evt) { showMapInfo();})

    // show map info
    function showMapInfo() {
        var zoom = map.getZoom(); //获取当前地图级别
        var center = map.getCenter(); //获取当前地图中心位置
        document.querySelector("#map-zoom").innerText = zoom;
        document.querySelector("#map-center").innerText = center.lng.toString() + ', ' + center.lat.toString();
    }
    showMapInfo();
</script>